<template>
  <el-dialog title="实例列表" :visible.sync="$store.state.showTableInfo">
    <el-input
      placeholder="请输入MatchServer地址"
      v-model="MatchServer"
      class="input-with-select"
    >
      <el-button
        slot="append"
        icon="el-icon-menu"
        @click="configuration"
      ></el-button>
    </el-input>
    <el-table :data="gridData">
      <el-table-column label="项目名" width="80">
        <template slot-scope="scope">
          <p class="scopeItem">
            {{ getFileName(scope.row.StaticInstance.ProjectPath) }}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        property="InstanceId"
        label="实例ID"
        width="220"
      ></el-table-column>
      <el-table-column
        property="CPU"
        label="CPU占用"
        width="80"
      ></el-table-column>
      <el-table-column label="稳定时长" width="100">
        <template slot-scope="scope">
          <p class="scopeItem">
            {{ formatDuring(scope.row.ElapsedAirCityCloud) }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="用户" width="50">
        <template slot-scope="scope">
          <p class="scopeItem">{{ scope.row.Connections.length }}</p>
        </template>
      </el-table-column>
      <el-table-column label="是否限制用户数量" width="120">
        <template slot-scope="scope">
          <p class="scopeItem">
            {{ scope.row.StaticInstance.LimitOneClient == 0 ? "否" : "是" }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="分辨率" width="100">
        <template slot-scope="scope">
          <p class="scopeItem">{{ scope.row.StaticInstance.Resolution }}</p>
        </template>
      </el-table-column>
      <el-table-column label="自适应" width="60">
        <template slot-scope="scope">
          <p class="scopeItem">
            {{ scope.row.StaticInstance.AdjustResolution == 0 ? "否" : "是" }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button class="scopeItem" @click="connect(scope.row.InstanceId)"
            >连接</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      gridData: [],
      MatchServer: "",
      aircityPlayer: null,
    };
  },
  computed: {},
  watch: {
    "$store.state.CloudStatus": function(e) {
      this.gridData = e.Instances;
    },
  },
  methods: {
    connect(instanceId) {
      let options = {
        domId: "editorPlayer",
        token: HostConfig.Token,
        showMarker: true,
        showStartupInfo: true,
      };
      this.$store.commit("setCurrentInstanceId", instanceId);
      this.aircityPlayer = new AirCityPlayer(instanceId, options);
      this.$store.commit("setairCityPlayer", this.aircityPlayer);
      this.aircityApi = new AirCityAPI(instanceId, {
        onReady: () => {
          //此时可以调用接口了
          // __g.camera.get(r => {
          //     this.log(`Camera: ${r.x}, ${r.y}, ${r.z}, ${r.pitch}, ${r.yaw}`)
          // })
        },
        onApiVersion: (vNo, vType) => {
          // var spanVer = document.getElementById('spanVer')
          // if (spanVer) {
          //     if (__g.misc.isApiVersionMatched()) {
          //         spanVer.innerHTML = '<font color=green>' + __g.misc.apiVersion + '</font>'
          //     } else {
          //         spanVer.innerHTML = 's:<font color=red>' + __g.misc.apiVersionServer + '</font>-c:' + __g.misc.apiVersion
          //         logWithColor('red', '<b>JS SDK版本和云渲染服务器版本不一致，可能造成接口调用错误，请确认!</b>')
          //         log(spanVer.innerHTML)
          //         log('')
          //     }
          // }
        },
        onEvent: (e) => {
          console.log(e);
          this.$store.commit("saveOnEvent", e);
        },
        onLog: (e) => {
          // console.log(e)
        },
        useColorLog: false, //仅用于SDK测试页面，二次开发请设置为false
      });
      this.$store.commit("setaircityApi", this.aircityApi);
    },
    getFileName(strName) {
      var pos = strName.lastIndexOf("\\");
      var pos2 = strName.lastIndexOf(".");
      //strFileName=str.substring(pos+1);//文件名带后缀
      return strName.substring(pos + 1, pos2);
    },
    formatDuring(time) {
      let days = parseInt(time / (1000 * 60 * 60 * 24));
      let hours = parseInt((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      let minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = (time % (1000 * 60)) / 1000;
      // 格式 00天 00时 00分 00秒
      if (days < 10) {
        days = "0" + days;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return days + "天 " + hours + ":" + minutes + ":" + Math.round(seconds);
    },
    configuration() {
      this.$store.commit("initWebSocket", this.MatchServer);
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {
    dataChange() {
      return this.$store.state.CloudStatus;
    },
  },
};
</script>

<style lang="scss" scoped></style>
